
<template>
	<!-- 组件-教学计划表格 -->
	<div>
		<el-row :gutter="16">
			<el-col :span="2">
				<span class="formLable">班级名称</span>
			</el-col>
			<el-col :span="3">
				<el-select placeholder="选择年级" v-if="isEdite==1" v-model="selectGrade" style="width:100%;"
				 @change="gradeChange">
					<el-option v-for="(row,index) in gradeList" :key="index"
					 :label="row.name" :value="row.gradeTypeId"></el-option>
				</el-select>
				<span class="formValue" v-else>{{queryTxt.gradeName}}</span>
			</el-col>
			<el-col :span="3">
				<el-select placeholder="选择班级" v-if="isEdite==1" v-model="saveParam.classId" style="width:100%;">

				</el-select>
				<span class="formValue" v-else>{{queryTxt.className}}</span>
			</el-col>
		</el-row>
		<el-row :gutter="16">
			<el-col :span="2">
				<span class="formLable">计划类型</span>
			</el-col>
			<el-col :span="6">
				<el-select v-if="isEdite==1" v-model="saveParam.planType" style="width:100%;">
					<el-option label="周计划" value="1"></el-option>
				</el-select>
				<span class="formValue" v-else>{{queryTxt.planType}}</span>
			</el-col>
		</el-row>
		<el-row :gutter="16">
			<el-col :span="2">
				<span class="formLable">应用时间</span>
			</el-col>
			<el-col :span="6">
				<weekPicker v-if="isEdite==1" @callback="pickTime" v-model="selectWeekTime"></weekPicker>
				<span class="formValue" v-else>{{queryTxt.time}}</span>
			</el-col>
		</el-row>
		<el-row>
			<plantable ref="plantable"></plantable>
		</el-row>
		<el-row v-if="isEdite==1" style="text-align:center;">
			<el-button @click="cancle">取消</el-button>
			<el-button @click="save">确定添加</el-button>
		</el-row>
	</div>
</template>

<script>
	import plantable from './plan_table'
	import weekPicker from '@keer/components/common/week_picker'
	let vm;
	export default{
		components:{plantable,weekPicker},
		data(){
			return {
				isEdite:1,
				gradeList:[],
				selectGrade:'',
				applyTime:'',
				selectWeekTime:[],
				searchTemplateParam:{
					gradeTypeId:null,
					planStartTime:null
				},
				saveParam:{
					orgId:'',
					campusId:'',
					classId:'',
					planTemplateId:'',
					planStartTime:'',
					planEndTime:'',
					planType:'1',
					planItemList:[]
				},
				queryTxt:{
					gradeName:'',
					className:'',
					planType:'',
					time:''
				}
			}
		},
		methods:{
			init(data){
				this.resetAddParam();
				this.saveParam.orgId=data.orgId;
				this.saveParam.campusId=data.campusId;
				this.isEdite=data.isEdite;
				this.$refs['plantable'].init(data);
				if(this.isEdite==0){
					this.queryInit(data.data)
				}
				else{
					this.getDradeList();
					let time=this.selectWeekTime;
					if(time&&time.length==2){
						this.saveParam.planStartTime=time[0];
						this.saveParam.planEndTime=time[1];
						this.searchTemplateParam.planStartTime=time[0];
					}
					
				}
			},
			resetAddParam(){
				this.selectGrade=null;

				this.saveParam={
					orgId:'',
					campusId:'',
					classId:'1',
					planTemplateId:'',
					planStartTime:'',
					planEndTime:'',
					planType:'1',
					planItemList:[]
				};
			},
			queryInit(data){
				// debugger
				this.queryTxt.gradeName=data.planTemplateName;
				this.queryTxt.className=data.classId;
				this.queryTxt.planType=data.planType;
				// data.planTemplateGradeList.forEach(ele2=>{
				// 	this.queryTxt.grade+=ele2.gradeTypeName+'、'
				// });
				// this.queryTxt.grade=this.queryTxt.grade.substr(0,this.queryTxt.grade.length-1);

				this.queryTxt.time=data.planStartTime.substr(0,10)+' 至 '+data.planEndTime.substr(0,10);
				
			},
			getDradeList(){
				api.getGradeTypeList({campusId:this.saveParam.campusId})
				.then(function(data){
					if(data.resultCode==2000){
						vm.gradeList=data.list;
					}
					else{
						vm.$message({
							type:'warning',
							message:data.message
						})
					}
				});
			},
			cancle(){
				this.$emit('cancle')
			},
			save(){
				this.saveParam.planItemList=this.$refs['plantable'].getPlanData();
				if(!this.saveParam.planItemList)return;
				api.teachPlanSave(this.saveParam)
				.then(function(data){
					if(data.resultCode==2000){
						vm.$message({
							type:'success',
							message:'添加成功！'
						})
						vm.$emit('success');
					}
					else{
						vm.$message({
							type:'warning',
							message:data.message
						})
					}
				});
			},
			gradeChange(val){
				this.searchTemplateParam.gradeTypeId=val;
				this.getPlanTemplateData();
			},
			pickTime(data){
				this.saveParam.planStartTime=data[0];
				this.saveParam.planEndTime=data[1];

				this.searchTemplateParam.planStartTime=data[0];
				this.getPlanTemplateData();
			},
			getPlanTemplateData(){
				if(this.searchTemplateParam.gradeTypeId&&this.searchTemplateParam.planStartTime){
					api.teachPlanTemplateQuery(this.searchTemplateParam)
					.then(function(data){
						if(data.resultCode==2000){
							vm.$refs['plantable'].init({
								isEdite:vm.isEdite,
								data:data.info
							});
						}
					});
				}
			},

		},
		mounted(){
			vm=this;
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss" scoped>
	.formLable,.formValue{
		font-size: 0.16rem;
		line-height: 0.4rem;
	}
	.formLable::before{
		content: '*';
		color: red;
		margin: 0 0.05rem;
	}
	.el-row{
		margin-bottom: 0.16rem;
	}

	/*自定义滚动条样式*/
	// .box-tasks::-webkit-scrollbar {
	// 	// height: 0.08rem;
	// 	width: 0.05rem;
	// }
	// .box-tasks::-webkit-scrollbar-thumb {
	// 	border-radius: 0.5rem;
	// 	background: #BBBBBB;
	// }
	// .box-tasks::-webkit-scrollbar-track {
	// 	background: rgba(242, 246, 252, 0);
	// }	

	
</style>